<template>
  <div class="details" v-if="detailsData">
    <div class="details-container">
      <!-- 导航条 -->
      <van-nav-bar
        title="标题"
        left-text="返回"
        left-arrow
        @click-left="goBack"
      />

      <!-- 图片 -->
      <div class="img">
        <van-image :src="$resetUrl(detailsData.image1)" />
      </div>

      <!-- 文字描述 -->
      <div class="info">
        <p>{{ detailsData.name }}</p>
        <p>价格：{{ detailsData.presentPrice }}</p>
      </div>

      <!-- 商品详情 -->
      <div class="goods-details">
        <div class="goods-details-title">商品详情</div>
        <div class="goods-details-content" v-html="detailsData.detail"></div>
      </div>

      <!-- 商品导航 -->
      <van-goods-action class="goods-action">
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="goodsLength"
        />

        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="showSkuCard = true"
        />
      </van-goods-action>
    </div>
    <!-- 商品规格 -->
    <div class="goods-sku" v-if="showSkuCard">
      <div class="mask"></div>
      <div class="goods-sku-card">
        <div class="goods-sku-title">
          <van-image
            class="goods-sku-title-img"
            :src="$resetUrl(detailsData.pictureComperssPath)"
          />
          <div class="goods-sku-title-right">
            <div class="goods-sku-title-price"></div>
            <div class="goods-sku-title-inventory">剩余:</div>
            <div class="goods-sku-title-name">{{ detailsData.name }}</div>
          </div>
        </div>
        <div class="goods-sku-content">
          <div class="goods-sku-content-title">商品的规格:</div>
          <div class="goods-sku-content-list">
            <div
              v-for="(item, idx) of detailsData.type"
              :key="item.id"
              @click="changeSkuCurrent(item, idx)"
              :class="[
                skuCurrentIdx === idx ? 'goods-sku-content-list-item-on' : null,
                'goods-sku-content-list-item',
              ]"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="goods-sku-footer">
          <van-button type="danger" block @click="addShopCar"
            >添加到购物车</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetailGoodsInfo } from "@/apis/details.js";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("shopcar");
export default {
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      detailsData: "", //详情页数据
      showSkuCard: false, //是否显示sku卡片
      skuCurrentIdx: 0, //sku的选项默认的初始值
      skuCurrentData: {}, //sku选中项的数据
      currentGoodsItem: {}, //当前选中的商品
    };
  },
  computed: {
    ...mapState(["goodsLength"]),
  },
  methods: {
    ...mapMutations(["getGoodsLength"]),
    goBack() {
      this.$router.go(-1);
    },
    changeSkuCurrent(item, idx) {
      //切换sku选项
      this.skuCurrentIdx = idx;
      let skuCurrentItem;
      this.detailsData.skuComb.forEach((items) => {
        if (items.s1 === item.id) {
          skuCurrentItem = items;
        }
      });
      //   console.log(newArr);
      this.skuCurrentData = Object.assign({}, skuCurrentItem, {
        type: this.detailsData.type[idx].name,
      });
    },
    addShopCar() {
      //添加到购物车
      //   当前选中的商品
      this.currentGoodsItem = Object.assign({}, this.skuCurrentData, {
        id: this.detailsData.id,
        name: this.detailsData.name,
        num: 1,
        image: this.detailsData.pictureComperssPath,
        isChecked: false,
        sku: {
          id: this.skuCurrentData.id,
          price: this.skuCurrentData.price,
          stock_num: this.skuCurrentData.stock_num,
          type: this.skuCurrentData.type,
        },
      });
      //   删除多余的属性（可选）
      this.$delete(this.currentGoodsItem, "s1");
      this.$delete(this.currentGoodsItem, "stock_num");
      this.$delete(this.currentGoodsItem, "type");
      this.$delete(this.currentGoodsItem, "price");
      //   console.log(currentGoodsItem);
      this.getShopCarList(this.currentGoodsItem);
      this.getGoodsLength(); //重新获取商品数量
      this.$toast.success("添加成功");
      this.showSkuCard = false;
    },
    getShopCarList(item) {
      //把单个商品整合成数组
      let shopCarList = this.$getStoarge("shopCarList") || [];
      //获取购物车列表
      if (shopCarList.length === 0) {
        //空数组
        shopCarList.push(item);
        this.$setStorage("shopCarList", shopCarList);
      } else {
        let newArr = shopCarList.filter((items) => {
          return items.id === item.id && items.sku.id === item.sku.id;
        });
        console.log(newArr);
        if (newArr.length) {
          newArr[0].num++;
          shopCarList.concat(newArr);
        } else {
          shopCarList.push(item);
        }
        this.$setStorage("shopCarList", shopCarList);
      }
    },
  },
  async activated() {
    let res = await this.$http.request({
      url: getDetailGoodsInfo,
      method: "POST",
      data: {
        goodsId: this.id,
      },
    });

    this.detailsData = res.data.data;

    // 默认sku赋值
    this.skuCurrentData = Object.assign({}, this.detailsData.skuComb[0], {
      type: this.detailsData.type[0].name,
    });

    this.getGoodsLength();
  },
};
</script>

<style scoped>
.details {
  width: 100%;
  height: 100%;
  position: relative;
}
.details-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.img {
  width: 100%;
  height: 740px;
}
.info {
  padding: 20px;
  box-sizing: border-box;
  font-size: 40px;
}
.goods-details-title {
  border-bottom: 3px solid red;
  color: red;
  text-align: center;
  height: 80px;
  line-height: 80px;
  font-size: 40px;
}
.goods-sku {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* display: none; */
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0.5;
  background: black;
  z-index: 3;
}
.goods-sku-card {
  width: 100%;
  height: 660px;
  background: white;
  position: fixed;
  z-index: 4;
  left: 0;
  bottom: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-top: 1px solid;
}
.goods-sku-title {
  display: flex;
  border-bottom: 3px solid rgb(211, 207, 207);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.goods-sku-title-img {
  width: 200px;
  height: 200px;
  border-radius: 40px;
  overflow: hidden;
}
.goods-sku-title-right {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.goods-sku-title-price {
  color: red;
  font-size: 60px;
}
.goods-sku-content {
  flex: 1;
}
.goods-sku-content-title {
  font-size: 28px;
  margin-bottom: 40px;
}
.goods-sku-content-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.goods-sku-content-list-item {
  width: 150px;
  height: 60px;
  background: #fff;
  border-radius: 60px;
  text-align: center;
  line-height: 60px;
  border: 2px solid;
}
.goods-sku-content-list-item-on {
  background: pink;
}
.goods-sku-footer {
  display: flex;
  justify-content: center;
}
</style>
